<template>
  <div class="home">
    <div class="home-page">
      <div class="h-header">
        <!-- 顶栏 -->
        <div class="h-search">
          <span class="h-search-pos location">
            <img src="/img/11.png" alt class="h-icon" @click="getLocation" v-if="!this.location.lat"/>
            <template v-else>北京</template>
          </span>
          <span class="h-search-pos" @click="handleSearch">
            <input type="text" :placeholder="placeholader" class="h-search-input" />
            <img src="/img/47.png" alt class="h-icon h-icon-search" />
          </span>
          <!-- <span class="h-search-pos" @click="signIn">
            <img src="/img/10.png" alt class="h-icon" />
          </span> -->
          <span class="h-search-pos" @click="toService">
            <!-- <router-link href="http://mad.miduoke.net/Web/im.aspx?_=t&accountid=108771"> -->
              <img src="/img/9.png" alt class="h-icon" />
            <!-- </router-link> -->
          </span>
        </div>
      </div>
      <!-- 广告位轮播 -->
      <Swiper :img="images"></Swiper>
      <!-- 公告 -->
      <router-link class="public_message" :to="'/public_message?article_id='+newestMessage.public.article_id" v-if="newestMessage&&newestMessage.public">
        <i class="icon"></i>
        <h4 class="title">{{newestMessage.public.title}}</h4>
      </router-link>
      <!-- 公告 -->
      <!-- 8个子项入口 -->
      <div class="grid-col">
        <van-row type="flex" justify="space-around">
          <van-col span="6" v-for="(vo, index) in cateList" :key="index">
            <router-link tag="div" :to="'/freshVegetables?cate='+vo.id+'&title='+vo.name" class="link-div">
              <img :src="vo.img" alt class="grid-img" />
              <span class="grid-font">{{vo.name}}</span>
            </router-link>
          </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
          <van-col span="6">
            <a tag="div" @click="$toast('开发中...')" class="link-div">
              <img src="/img/46.png" alt class="grid-img" />
              <span class="grid-font">菜园果园</span>
            </a>
          </van-col>
          <van-col span="6">
            <a tag="div" @click="toOldVip" class="link-div">
              <img src="/img/40.png" alt class="grid-img" />
              <span class="grid-font">老会员专区</span>
            </a>
          </van-col>
          <van-col span="6">
            <router-link tag="div" :to="{name:'rechangeDivision'}" class="link-div">
              <img src="/img/42.png" alt class="grid-img" />
              <span class="grid-font">充值专区</span>
            </router-link>
          </van-col>
          <van-col span="6">
            <router-link tag="div" :to="{name:'couponExchange'}" class="link-div">
              <img src="/img/41.png" alt class="grid-img" />
              <span class="grid-font">卡券兑换</span>
            </router-link>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 礼品卡 -->
    <div class="h-present" @click="goToGiftCard">
      <span class="h-present-icon">
        <img src="/img/11.png" alt />
        <span class="h-present-title">我的礼品卡</span>
      </span>
      <span class="h-present-go">
        <img src="/img/44.png" alt />
      </span>
    </div>
    <!-- 每日特惠 -->
    <div class="day-sale" v-for="(prom,i) in baopingList" :key="'bp_list'+i">
      <div class="box">
        <div class="box-info">
          <div class="day-time">
            <div class="now-day">{{weekDay}} / {{(date.getMonth() + 1)+'.'+date.getDate()}}</div>
            <div class="now-week">{{weekDayCn}}</div>
          </div>
          <div class="baoping">爆品直降</div>
          <div class="day-title">享受超值低价</div>
        </div>
        <div class="day-product-box">
          <router-link class="product-preview" v-for="(vo, index) in prom.goods" :key="index" :to="'/product_detail?id='+vo.goods_id+'&from='+$route.name">
            <img :src="vo.original_img" alt />
            <div class="discount">爆品</div>
            <p class="title">{{vo.goods_name}}</p>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 新米特惠 -->
    <div class="preference" v-if="uncount.length>0" >
      <!-- 两个活动 -->
      <router-link class="preference-item" v-for="(item, index) in uncount" :key="index" :to="'/activity?cid='+item.id">
        <p class="preference-title">{{item.title}}</p>
        <p class="preference-message" v-html="item.description"></p>
        <div class="preference-commodity-box">
          <router-link :to="'/product_detail?id='+vo.goods_id" class="preference-commodity" v-for="(vo, i) in item.goods" :key="i">
            <div class="commodity-tag">
              <img src="/img/59.png" alt />
              <span>HOT</span>
            </div>
            <img :src="vo.original_img" alt class="preference-img" />
          </router-link>
        </div>
      </router-link>
      <!-- <div class="preference-item">
        <p class="preference-title">新米特惠</p>
        <p class="preference-message">爆品全场9.5折起</p>
        <div class="preference-commodity-box">
          <div class="preference-commodity">
            <div class="commodity-tag">
              <img src="/img/59.png" alt />
              <span>HOT</span>
            </div>
            <img src="/img/70.png" alt class="preference-img" />
          </div>
          <div class="preference-commodity">
            <div class="commodity-tag">
              <img src="/img/59.png" alt />
              <span>HOT</span>
            </div>
            <img src="/img/71.png" alt class="preference-img" />
          </div>
        </div>
      </div> -->
    </div>
    <!-- 为你推荐 -->
    <div class="h-recommend">
      <h3>为你推荐</h3>
      <!-- 缺少一张背景图 TODO -->
    </div>
    <div class="product-preview">
      <product-item
        v-for="(item,index) in tuijianList"
        :key="`porduct_list_${index}`" :productInfo="item"
      ></product-item>
    </div>    
  </div>
</template>
<script>
import Swiper from "@/components/swiper";
import productItem from "@/components/product-item";
import { mapActions } from "vuex";
export default {
  name: "home",
  data() {
    return {
      date: new Date(),
      location: {
        lon: '',
        lat: '',
        address: ''
      },
      newestMessage: undefined,
      routerList: [
        { name: "freshVegetables" },
        { name: "meatEgg" },
        { name: "grainOil" },
        { name: "newToTry" },
        { name: "orchardGarden" },
        { name: "oldVip" },
        { name: "rechangeDivision" },
        { name: "couponExchange" }
      ],
      placeholader: "牛肉",
      productList: [1, 2],
      cateList: [],
      bannerList: [],
      baopingList: [],
      giftList: [],
      hotList: [],
      isNewList: [],
      tuijianList: [],
      uncount: [],
    };
  },
  components: {
    Swiper,
    productItem
  },
  computed:{
    images(){
      var a = []
      for (let index = 0; index < this.bannerList.length; index++) {
        const element = this.bannerList[index];
        a.push(element.ad_code)
      }
      return a
    },
    weekDay(){
      return this.date.toString().split(' ')[0]
    },
    weekDayCn(){
      var config = {
        Mon: '星期一',
        Tue: '星期二',
        Wed: '星期三',
        Thu: '星期四',
        Fri: '星期五',
        Sat: '星期六',
        Sun: '星期日',
      }
      return config[this.weekDay] || '星期'
    }
  },
  methods: {
    ...mapActions(["homeList","lastMessage"]),
    handleSearch() {
      this.$router.push({ path: "/search" });
    },
    handleRouterLink(obj) {
      this.$router.push(obj);
    },
    handleToDetails() {
      this.$router.push({ path: "/product_detail" });
    },
    getHomeList() {
      this.homeList().then(res => {
        this.cateList = res.data.result.cate;
        this.bannerList = res.data.result.banners;
        this.baopingList = res.data.result.baopin;
        this.tuijianList = res.data.result.tuijian;
        this.isNewList = res.data.result.is_new;
        this.hotList = res.data.result.hot;
        this.giftList = res.data.result.gift;
        this.uncount = res.data.result.uncount;
      });
    },
    getLastMessage(){
      this.lastMessage().then(res=>{
        this.newestMessage = res.data.result
      }).then(e=>{

      })
    },
    goToGiftCard() {
      this.$router.push({ path: "/gift_card" });
    },
    signIn(){
      this.$store.dispatch('user_sign',{}).then(res => {

      }).catch(e => {

      })
    },
    getLocation(){
      this.$wx.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: (res) => {
          console.log('[地址]', res)
          this.$toast('位置获取成功')
          this.location.lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          this.location.lon = res.longitude; // 经度，浮点数，范围为180 ~ -180
        },
        fail:() => {
          this.$toast('位置获取失败')
        }
      });
    },
    toOldVip(){
      var user = this.$cookie.getUserInfo()
      console.log(user)
      if(!user) return false
      if(!user.if_old_member){
        return this.$toast('对不起，只有老会员才有权限')
      }
      this.$router.push({
        name: 'oldVip'
      })
    },
    toService(){
      document.location.href = 'http://mad.miduoke.net/Web/im.aspx?_=t&accountid=108771'
    }
  },
  created() {
    this.getHomeList()
    this.getLastMessage()
    this.getLocation()
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
@import "./home.less";
.link-div {
  display: flex;
  flex-direction: column;
  // // align-items: centerl;
  // justify-items: center;
  span {
    text-align: center;
  }
}
</style>
